<template>
  <view class="header">
    <view class="header1">
      <u-avatar :src="user.avatarUrl" size="large"></u-avatar>

      <view class="info" v-if="user.username!=='立即登录'">
        <view class="name">{{ user.username }} </view>
        <view class="desc" >
          <view class="iconfontv icon-huiyuan:before">
          </view> 普通会员
        </view>
      </view>
      <view class="info" v-else>
        <view class="name" @click="show=true">{{ user.username }} </view>
      </view>
    </view>
    <view class="images">
      <view class="left">
        经典黑卡
      </view>
      <view class="right">
        开通会员
      </view>
    </view>
  </view>

  <view class="myorder">
    <view class="top">
      <view class="title">
        我的订单
      </view>
      <view class="right" @click="jumpse(-1)">
        全部订单
        <u-icon name="arrow-right" color="#999999" size="20"></u-icon>
      </view>
    </view>
    <view class="bottom">
      <u-grid :border="false" col="5" @click="click">
        <u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex" @click="jumpse(baseListIndex)">
          <view class="iconfont" :class="baseListItem.name">
          </view>
          <text class="grid-text">{{baseListItem.title}}</text>
        </u-grid-item>
      </u-grid>
    </view>
  </view>

  <view class="menu-list">
    <u-grid :border="false" col="4">
      <u-grid-item v-for="(listItem,index) in list" @click="jump(index)" :key="index">
        <view class="iconfont" :class="listItem.name"></view>
        <text class="grid-text">{{listItem.title}}</text>
      </u-grid-item>
    </u-grid>
    <u-toast ref="uToast" />
  </view>
  <!-- 弹出层 -->
  <view>
    <u-popup v-model="show" mode="bottom">
      <!-- 弹出层 -->
      <view class="ejects">
        <form @submit="submit">
          <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="butt">
            <image :src="user.avatarUrl" mode="" class="content-im"></image>
          </button>
          <input type="nickname" placeholder="请输入昵称" class="ipt" name='nickname'>
          <button class="but" type="primary" form-type="submit">登录</button>
        </form>
      </view>
    </u-popup>
  </view>
  <Lampfooter></Lampfooter>
</template>

<script setup>
  import Lampfooter from "/src/components/Lampfooter/Lampfooter.vue"
  import {
    useUserStore
  } from "../../store/user.js"
const userStore = useUserStore()

  import {
    reactive,
    ref,
  } from 'vue';
  //控制登录弹框
  const show = ref(false)
  const {
    user
  } = userStore
  
  const submit = (e) => {
      if (e.detail.value.nickname == "") {
        uni.showToast({
          title: '请输入昵称',
          duration: 2000,
          icon: "error"
        });
        return
      } else if (user.avatarUrl === user.deftavatarUrl) {
        uni.showToast({
          title: '请选择头像',
          duration: 2000,
          icon: "error"
        });
         return
      }
      //修改用户名
      userStore.setnickName(e.detail.value.nickname)
      show.value = false
      userStore.Login()
      }
      // 头像
      const onChooseAvatar = async (e) => {
        uni.showToast({
          title: '上传中...',
          duration: 2000,
          icon: 'loading'
        })
        //转换图片为base64
        const imgBase64  = wx.getFileSystemManager().readFileSync(e.detail.avatarUrl,'base64');
        //发上请求上传图片
        const response = await uni.$http.post("/user/updateavatar",{image:imgBase64})
        userStore.setavatarUrl(response.data.url)
        userStore.getopenid()
      }
      const baseList = reactive([{
          name: 'icon-daifukuan:before',
          title: '代付款'
        },

        {
          name: 'icon-daifahuo:before',
          title: '待发货'
        },
        {
          name: 'icon-daishouhuo:before',
          title: '待收货'
        },
        {
          name: 'icon-daipingjia:before',
          title: '待评价'
        },
        {
          name: 'icon-tuikuanguanli',
          title: '退款/售后'
        }
      ])
      const list = reactive([{
          name: 'icon-dingdan:before',
          title: '我的订单'
        },
        {
          name: 'icon-huiyuanqia:before',
          title: '我的会员卡'
        },
        {
          name: 'icon-a-youhuiyouhuiquan:before',
          title: '我的优惠劵'
        },
        {
          name: 'icon-jifen01:before',
          title: '我的积分'
        },
        {
          name: 'icon-yue:before',
          title: '我的余额'
        },
        {
          name: 'icon-shoucang:before',
          title: '我的收藏'
        },
        {
          name: 'icon-fengkuangkanjia:before',
          title: '我的砍价'
        },
        {
          name: 'icon-pintuan:before',
          title: '我的拼团'
        },
        {
          name: 'icon-shouhuodizhi:before ',
          title: '收货地址'
        },
        {
          name: 'icon-tuichu:before',
          title: '退出登录'
        },
      ])

      function jump(index) {
        console.log(index);
      if(index===0){
        uni.navigateTo({
           url: `/subPack/Allorder/Allorder?index=${index}`
        })
      }
        if(index===5){
          uni.navigateTo({
            url: "/subPack/myCollect/myCollect"
          })
        }
        if( index===6){
       uni.navigateTo({
         url: "/subPack/mycutprice/mycutprice"
       })
        }
       if(index===7){
         uni.navigateTo({
          url: "/subPack/mytuan/mytuan"
         })
       }
        if(index===8){
          uni.navigateTo({
            url: "/subPack/Address/Address"
          })
        }if(index==9){
           
            userStore.$reset()
            uni.showToast({
              title: '退出登录成功',
              duration: 2000,
              icon: "success"
            });
            uni.redirectTo({
                url: '/pages/home/home'
              }) 
        }
      }

      function jumpse(index) {
       if(index===4){
         return 
       }else{
         uni.navigateTo({
           url: `/subPack/Allorder/Allorder?index=${index+1}`
         })
       }
    
      }
</script>

<style scoped lang="scss">
  .header {
    background-color: #ff3c29;
    border-bottom: 1px solid #ddd;
    background-image: url(https://ma.faisys.com/static/img/member_center_head_bg.6c7cc821.png);
    background-size: cover;
    background-repeat: no-repeat;

    .header1 {
      position: relative;

      display: flex;
      align-items: center;
      // border: 1px solid red;
      padding: 40rpx;


      .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 2rpx solid red;
      }

      .info {
        width: 65%;
        margin-left: 40rpx;

        .name {
          color: #fff;
          font-size: 36rpx;


        }

        .desc {
          width: 140rpx;
          border-radius: 20rpx;
          justify-content: space-around;
          display: flex;
          // border: 1px red solid;
          font-size: 25rpx;
          margin-top: 20rpx;
          color: #AE816E;
          background-color: #f3e5cc;
        }
      }
    }

    .images {
      display: flex;
      margin: 0 auto;
      height: 65rpx;
      width: 700rpx;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url(https://ma.faisys.com/dist/static/img/memberCenterCardBg1_black.eb4bf788.png);
      justify-content: space-between;
      align-items: center;
      text-align: center;

      .left {
        margin-left: 50rpx;
        font-size: 25rpx;
        color: #d3b88a;
      }

      .right {
        width: 140rpx;
        background-color: #f3e5cc;
        border-radius: 25rpx;
        margin-right: 50rpx;
        font-size: 25rpx;

        color: #775324;
      }
    }
  }




  .myorder {
    background-color: #fff;
    margin: 0 25rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      margin: 0 20rpx;
      border-bottom: 2px solid #f4f4f4;

      .right {
        display: flex;
        align-items: center;
        font-style: 25rpx;
        color: #999;
      }
    }

    .bottom {
      margin-top: 20rpx;

      .grid-text {
        font-size: 25rpx;
        color: #909399;
        padding: 20rpx 0 20rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
      }
    }
  }


  .menu-list {
    margin: 0 20rpx;
    border-radius: 10rpx;

    margin-top: 30rpx;
    padding-bottom: 30rpx;
    background-color: #fff;

    .grid-text {
      font-size: 25rpx;
      color: #909399;
      padding: 20rpx 0 20rpx 0rpx;
      /* #ifndef APP-PLUS */
      box-sizing: border-box;
      /* #endif */
    }



  }

  // 弹出层
  .ejects {
    width: 100%;
    height: 500rpx;
    position: relative;

    .butt {
      width: 250rpx;
      height: 220rpx;
      margin: 0 auto;

      .content-im {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
      }
    }

    .ipt {
      width: 300rpx;
      height: 100rpx;
      text-align: center;
      // border: 1px solid red;
      margin: 0 auto;
    }

    .but {
      width: 100%;
      position: absolute;
      bottom: 0;
    }

  }
</style>